<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="vrPages bg-fff col-3e">
            <block v-if="kaiList.length > 0">
                <scroll-view :scroll-x="true" class="kaiNav top-20">
                    <block v-for="(kai, index) in kaiList" :key="index">
                        <view class="kaiItem" :class="currKai === index?'active':''" @click="changeKai(index)">
                            {{kai.title}}
                        </view>
                    </block>
                </scroll-view>
            </block>
            
            <view class="listBox" v-if="kaiList.length > 0 && kaiList[currKai].list.length > 0">
                <view class="houseItem" v-for="(item, index) in kaiList[currKai].list"  :key="index">
                    <view class="houseTitle flex" @click="navTo(item)">
                        <view class="leftLogo">
                            <image class="logo" :src="item.image_list[0].url" mode="aspectFill"></image>
                        </view>
                        <view class="rightTitle flex">
                            <view class="nameBox flex">
                                <view class="title">{{item.product_title}}</view>
                                <view>
                                    <text class="item">视频看房</text>
                                </view>
                            </view>
                            <view class="priceBox">
                                <block v-if="item.price">
                                    <text class="price"><text class="priceNum fontNum">{{item.price}}</text>元/m²</text>
                                    <text class="line">|</text>
                                </block>
                                <block v-else-if="item.amount">
                                    <text class="price fontNum">{{item.amount}}</text>
                                    <text class="line">|</text>
                                </block>
                                <text class="area">{{item.area}}</text>
                                <text class="jiedao" v-if="item.street">{{item.street}}</text>
                            </view>
                        </view>
                    </view>
                    <view class="houseType">
                        {{item.title}}
                    </view>
                    <view class="videoImg">
                        <image class="bannerImg" :src="item.image.length > 0 ? item.image[0].url : item.image_list[0].url" mode="scaleToFill"></image>
                        <view class="item flex" @click="toPlayVideo(item)">
                            <text class="icon-video bg"></text>
                        </view>
                    </view>
                </view>
                <!-- <view class="lineHeight15 border-top-grey padding-top-10 top-15 font10 col-grey">
                    免责声明：{{ disclaimer }}
                </view> -->
                <share-btn :display="scrollAnimate"></share-btn>
            </view>
            
            <up-empty text="暂无数据" mode="list" marginTop="100" v-if="kaiList.length === 0 || kaiList[currKai].list.length === 0"></up-empty>

            <block v-if="!loading && kaiList[currKai].list.length > 0">
                <view class="empty flex font13 col-grey">暂无更多</view>
            </block>

			<!-- <bind-seller-bottom-bar :detail="recommendAdviser" v-if="recommendAdviser&&recommendAdviser.avatar_url"></bind-seller-bottom-bar> -->

            <!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
        </view>
    </block>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useConfigStore, useUserInfoStore, useIndexStore } from '@/store/index';
    import { isBoolean } from '@/common/common';
	import { panListAPI, getKaiVideoList } from "@/common/api";
    // import { dispatchClient } from '@/common/api-adviser';
    // import { getSellerInfoById } from '@/common/api/adviser';

	export default {
		data() {
			return {
                kaiId: '',
                kaiList: [],
                currKai: 0,
                title: '',
                productId: '',
				loading: true,
                share: false,
                start_time: 0,
                scrollAnimate: false,
                recommendAdviser: {}
            }
		},
        onShareAppMessage(res) {
            return {
                title: `【${this.title}】-视频列表`,
                path: `/pages/product/video/list/index?productId=${this.productId}&kaiId=${this.kaiId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=楼盘视频列表-${this.title}-${this.productId}`,
            }
        },
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `【${this.title}】-视频列表`,
                query: `productId=${this.productId}&kaiId=${this.kaiId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=楼盘视频列表-${this.title}-${this.productId}`
            }
        },
        //#endif
		onLoad(options) {
            const that = this;
            let { productId='', title='', kaiId='', puid='', share=false } = options;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.kaiId = kaiId&&kaiId!=='undefined'?kaiId:'';
            this.share = isBoolean(share);
            this.start_time = (new Date()).getTime();
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
            uni.setNavigationBarTitle({
                title: `${this.title}视频列表`
            });
            
            if(this.productId){
            	uni.$check_and_login(function () {
                    that.init();
            	})
            }
		},

        computed:{
			...mapState(useConfigStore, ['scene', 'puid']),
			...mapState(useUserInfoStore, ['userInfo']),
			...mapState(useIndexStore, ['disclaimer']),
		},
        
        onPageScroll() {
            const that = this;
            that.scrollAnimate = true;
            this.$u.debounce(function() {
                that.scrollAnimate = false;
            }, 500);
        },
		
		methods: {
			...mapActions(useConfigStore, ['setPuid']),

            //初始化
            async init() {
                try {
                    // //绑定客户
                    // await dispatchClient({
                    //     share: this.share,
                    //     puid: this.puid,
                    //     pid: this.productId
                    // });

                    // //根据顾问ID获取被绑定的顾问信息
					// if(this.puid && this.puid !== this.userInfo.id) {
                    //     let sellInfoRes = await getSellerInfoById({id: this.puid, productId: this.productId});
                    //     if(sellInfoRes.status === 0) {
                    //         if(sellInfoRes.detail.product_id && sellInfoRes.detail.product_id == this.productId) {
                    //             this.recommendAdviser = sellInfoRes.detail;
                    //         }
                    //     }
                    // }

                    this.getPanList();

                } catch (error) {}
            },

            //获取开盘id
            getPanList(){
                panListAPI(this.productId).then(res => {
                    if(res.status === 0) {
                        if(res.detail.length > 0) {
                            this.kaiList = res.detail.map(item => ({
                                ...item,
                                list: [],
                            }))
                            if(this.kaiId) {
                                this.kaiList.forEach((kai, index) => {
                                    if(kai.id == this.kaiId) {
                                        this.currKai = index
                                    }
                                })
                            }
                            this.getVideoList();
                        }
                    }else {
                        uni.$u.toast(res.detail);
                    }
                })
            },
            
            //获取开盘对应的视频
			getVideoList(){
                let currKaiItem = this.kaiList[this.currKai];
                if(currKaiItem.list.length > 0) {
                    return
                }
                getKaiVideoList(this.kaiId?this.kaiId:currKaiItem.id).then(res => {
                	if(res.status == 0){
                        if(res.detail.length > 0) {
                            currKaiItem.list = res.detail;
                        }
                        this.loading = false;
                	}else{
                        this.loading = false;
                        uni.$u.toast(res.detail);
                    }
                })
			},
			
            //切换开盘
            changeKai(index){
                if(index === this.currKai) {
                    return
                }
                this.currKai = index;
                this.kaiId = this.kaiList[index].id;
                this.getVideoList()
            },
            
			//跳转播放页面
			toPlayVideo(info){
				uni.navigateTo({
					url: `/pages/product/video/play?videoId=${info.id}&puid=${this.puid}&title=${info.title}`
				})
			},
            
			navTo(info){
				uni.navigateTo({
					url: `/pages/product/detail/index?productId=${this.productId}&puid=${this.puid}&title=${info.product_title}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vrPages{
		min-height: 100vh;
        padding-bottom: 160rpx;
        border-bottom: 1rpx solid rgba(0,0,0,0);
        .kaiNav{
            width: 100%;
            white-space: nowrap;
            border-bottom: 1rpx solid rgba(0,0,0,.05);
            .kaiItem{
                display: inline-block;
                margin: 0rpx 20rpx;
                padding-bottom: 20rpx;
                position: relative;
            }
            .active{
                font-size: 32rpx;
                font-weight: bold;
                &::after{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 20%;
                    width: 60%;
                    height: 5rpx;
                    background-color: $theme-color;
                }
            }
        }
        .listBox{
            padding: 0rpx 28rpx;
        }
		.houseItem{
			margin-top: 50rpx;
			.houseTitle{
				.leftLogo{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					overflow: hidden;
					.logo{
						width: 100%;
						height: 100%;
					}
				}
				.rightTitle{
					flex-direction: column;
					align-items: flex-start;
					width: calc(100% - 80rpx);
					padding-left: 20rpx;
					.nameBox{
						line-height: 1;
						display: flex;
						justify-content: space-between;
						.title{
							font-size: 32rpx;
							font-weight: bold;
							margin-right: 20rpx;
						}
						.item{
							margin-right: 20rpx;
							padding: 8rpx 14rpx;
							background-color: #F3F4F8;
							color: #878B8E;
							font-size: 24rpx;
						}
					}
					.priceBox{
						line-height: 1;
						margin-top: 14rpx;
						.price{
							color: #E04C1F;
							.priceNum{
								font-weight: bold;
								font-size: 36rpx;
							}
							margin-right: 10rpx;
						}
						.line{
							font-size: 18rpx;
							font-weight: 100;
							margin-right: 10rpx;
						}
						.area{
							color: #7E7F83;
							margin-right: 20rpx;
						}
						.jiedao{
							color: #7E7F83;
						}
					}
				}
			}
			.houseType{
				font-size: 30rpx;
				margin: 20rpx 0rpx;
				.price{
					margin-left: 10rpx;
				}
				.typePrice{
					color: #E04C1F;
				}
			}
			.videoImg{
				position: relative;
				height: 370rpx;
				border-radius: 10rpx;
				overflow: hidden;
				.bannerImg{
					width: 100%;
					height: 100%;
				}
				.item{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 10;
					background-color: rgba(0,0,0,.2);
					color: #FFFFFF;
                    .icon-video{
                        background-image: url("https://image.srea.org.cn/xcx/icon/icon-video.png");
                        width: 120rpx;
                        height: 120rpx;
                        border-radius: 50%;
                        background-color: rgba(0,0,0,.5);
                        background-size: 55%;
                    }
				}
			}
			.houseImg{
				height: 370rpx;
				overflow: hidden;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				.ipang-vr{
					width: 150rpx;
					height: 150rpx;
					line-height: 150rpx;
					text-align: center;
					border-radius: 50%;
					background-color: rgba(0,0,0,.4);
					font-size: 80rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
